<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/src/initializer.js"></script>
    <title>文章详情</title>
</head>
<body>
    <div id="app" v-loading="loading">
        <template v-if="!editing">
            <h1>标题:{{articleInfo.title}}</h1><br>
            <p>作者:{{username}}</p>
            <p class="article-date">最后修改于:{{articleInfo.updated_at | formatDate}}</p>
            <h2>文章内容</h2>
            <p>{{articleInfo.content}}</p>
            <el-button v-if="isAuthor" type="primary" @click="editing = !editing">修改文章</el-button>
            <el-button v-if="isAuthor" type="danger" @click="deleteArticle">删除文章</el-button>
        </template>
        <template v-else>
            <blog-article-editor> :article-info="articleInfo" @cancel="cancelEdit" @finish="updateArticle"></blog-article-editor>
        </template>
    </div>

<script>
    init(['header','article-editor']).then(() => {
        new Vue({
            el: '#app',
            data: {
                id: 0,
                aid: 0,
                idFromSession: 0,
                username: "",
                articleInfo: {
                    id: 0,
                    aid: 0,
                    title: '',
                    content: ''
                },
                isLogin: false,
                editing: false,
                isAuthor: true,
                loading: false
            },
            mounted() {
                const url = new URL(location.href)
                this.id = url.searchParams.get('id')
                this.aid = url.searchParams.get('aid')
                this.getUserId().then(_ => {
                    if (!this.id) {
                        this.$alert('无效文章ID')
                    }
                    if (this.aid != this.idFromSession) {
                        this.isAuthor = false
                    }
                    this.loadArticleInfo(this.id)
                });
            },
            methods: {
                async loadArticleInfo(id) {
                    try {
                        this.loading = true
                        this.articleInfo = (await axios(Api.getArticleContent(id))).data
                        this.username = (await axios(Api.getArticleContent(id))).data.username
                        this.loading = false
                    }catch (e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async updateArticle() {
                    try {
                        this.loading = true
                        this.articleInfo.id = this.id
                        this.articleInfo.aid = this.aid
                        await axios(Api.updateArticle(this.articleInfo))
                        this.articleInfo = (await axios(Api.getArticleContent(this.id))).data
                        console.log(this.articleInfo)
                        this.$alert("修改成功!")
                        this.editing = false
                        this.loading = false
                    }catch (e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async getUserId() {
                    try{
                        this.idFromSession = (await axios(Api.getUserInfo())).data.id
                        this.isLogin = true
                    }catch (e) {
                        this.isAuthor = false
                        this.isLogin = false
                        if(e.response.data.code==403) {
                        }else if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                deleteArticle() {
                    this.$confirm('即将永久删除该文章，是否继续？','提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(_ => {
                        try{
                            this.loading = true
                            this.articleInfo.id = this.id
                            this.articleInfo.aid = this.aid
                            axios(Api.deleteArticle(this.articleInfo)).then(_ => {
                                window.location.href='/articles.html'
                            })
                            this.loading = false
                        }catch (e) {
                            this.loading = false
                            if(e.response) {
                                this.$alert(e.response.data.message)
                            }else {
                                this.$alert("网络错误")
                            }
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消删除'
                        });
                    })
                },
                async cancelEdit() {
                    this.loading = true
                    await this.loadArticleInfo(this.id)
                    this.loading = false
                    this.editing = false
                }
            },
            filters: {
                formatDate(input) {
                    return new Date(input).format('yyyy-MM-dd')
                }
            }
        })
    })
</script>
</body>
</html>